<!--
 * @Author: qiankui
 * @Date: 2024-2-21 09:13:46
 * @LastEditors: qiankui
 * @LastEditTime: 2024-2-21 09:13:56
 * @FilePath: \accesscontrolui\src\views\xtpz\classes\index.vue
 * @Description:
-->
<template>

  <div class="page-container h-100">
    <div v-if="!editOrgFlag" class="wrapperform m-b-16">
      <div class="searchbox">
        <el-form :inline="true" :model="searchForm" ref="ruleForm">
          <el-form-item label="考勤组名称" prop="name">
            <el-input class="inputEl" placeholder="请输入" v-model="searchForm.name" ></el-input>
          </el-form-item>
          <el-form-item style="float: right"  class="BlankPlaceholder" label=".">
            <el-button size="small" type="primary" class="topBtn" @click="search">{{
                this.i18n.t("Query")
              }}</el-button>
            <el-button size="small" type="handle" class="topBtn" @click="reset">{{
                this.i18n.t("Reset")
              }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div v-if="!editOrgFlag" class="table-container table-box globalDiv">
      <el-table stripe :height="tableHeight" :data="dataList.values" :header-cell-style="{ 'background-color': 'rgba(201, 215, 242, 1)' }">
        <el-table-column type="index" label="序号" width="100px" align="center"> </el-table-column>
        <el-table-column prop="name" label="考勤组类型">
          <template slot-scope="scope">
            <p>{{ scope.row.type===0?"固定班制":scope.row.type===1?"排班制":"自由班制"}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="考勤组名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="accountInfo.userName" label="创建人"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="name" label="操作">
          <template slot-scope="scope">
            <i class="icon icon-pencil-line" @click="handleEdit(scope.row)"></i>
            <i class="icon icon-trash" @click="handleDel(scope.row)"></i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="!editOrgFlag" style="background: #fff;padding: 10px;">
      <!--添加-->
      <el-button size="mini" @click="handleAdd">
        <i class="iconfont-KUI icon-plus-circle"></i>
        {{this.i18n.t('New attendance group')}}
      </el-button>
<!--      <el-dropdown  @command="handleCommand">-->
<!--          <span class="el-dropdown-link">-->
<!--            <el-button size="mini">{{this.i18n.t('Add')}}<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></el-button>-->
<!--&lt;!&ndash;            <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-button size="mini" icon="el-icon&#45;&#45;right">添加</el-button>&ndash;&gt;-->

<!--          </span>-->
<!--        <el-dropdown-menu slot="dropdown">-->
<!--          <el-dropdown-item command="gd">固定班制</el-dropdown-item>-->
<!--          <el-dropdown-item command="pb">排班制</el-dropdown-item>-->
<!--          <el-dropdown-item command="zy">自由班制</el-dropdown-item>-->
<!--        </el-dropdown-menu>-->
<!--      </el-dropdown>-->

      <el-pagination
          style="display: inline-block;float: right"
          small
          background
          :pager-count="5"
          @size-change="handleSizeChange"
          @current-change="handleRightCurrentChange"
          :current-page.sync="form.pageNumber"
          :page-size="form.pageSize"
          layout="sizes,total, prev, pager, next, jumper"
          :total="dataList.totalCount"
          :page-sizes="[10, 20, 50, 100]"
      ></el-pagination>
    </div>

    <editOrAdd v-if="editOrgFlag" :editOrgFlag.sync="editOrgFlag" :handleType="handleType" :tableRow="tableRow" ref="detailsRef"></editOrAdd>
  </div>

</template>
<script>

import editOrAdd from "./components/editOrAdd.vue";
import {attendancegroupDelete, attendancegroupGetlist} from "@/api/pcmj/kqz";

export default {
  name: "classes",
  props: {
    listType: {
      type: String,
      default: "free",
    },
  },

  components: {
    editOrAdd
  },
  data() {
    return {
      searchForm: {
        name: "",
      },
      dataList: {},
      form: {
        pageSize: 10,
        pageNumber: 1,
      },
      editOrgFlag:false,
      handleType:null,
      tableHeight:window.innerHeight-310,
      tableRow:{}
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 处理表格选中事件
      // 可以根据需要进行处理
    },
    handleCommand(command) {
      switch (command) {
        case 'gd':
          // this.importManage()
          console.log('固定班制')
          break;
        case 'pb':
          console.log('排班制')
          break;
        case 'zy':
          console.log('自由班制')
          break;
      }
    },
    setTableHeight:function(){
      console.log('设置表格高度吖',window.innerHeight);
      //获取浏览器高度并计算得到表格所用高度。
      this.tableHeight=window.innerHeight-310
    },
    // 删除时的回调
    handleDel(row){
      this.W.$myConfirm('warning', this.i18n.t('Are you sure you want to delete it'))
          .then(async () => {

            attendancegroupDelete(row.id).then(res => {
              if (res.code == 200) {
                this.search()
                // 删除成功
                this.W.$tips("success", this.i18n.t('Successfully deleted'));
              }
            })
          })
          .catch(() => {
          });
    },
    // 编辑
    handleEdit(row){
      this.tableRow=row
      this.handleType="edit"
      this.editOrgFlag=true
    },
    // 页码变化时
    handleRightCurrentChange(val) {
      this.form.pageNumber = val;
      this.search()
    },
    // 每页显示的数量变化时
    handleSizeChange(val){
      this.form.pageSize = val
      this.search()
    },
    // 添加班次
    handleAdd(){
      this.handleType="add"
      this.editOrgFlag=true
    },
    search(){
      this.getList()
    },
    reset(){
      this.searchForm.name=null
      this.search()
    },
    // 获取考勤组列表
    attendancegroupGetlist(params){
      attendancegroupGetlist(params).then(res => {
        if (res.code == 200) {
          this.dataList=res.data || []
          console.log('59',this.dataList);
        }
      })
    },
    getList() {

      if (this.searchForm.name==''||this.searchForm.name==undefined){
        this.searchForm.name==null
      }

      var params={
        pageNumber:this.form.pageNumber,
        pageSize:this.form.pageSize,
        name:this.searchForm.name
      }
      console.log(params);
      this.attendancegroupGetlist(params)
    },
  },
  beforeDestroy() {
    //移除监听事件
    window.removeEventListener('resize', this.setTableHeight);
  },
  mounted(){
    this.getList()
    var _this=this
    window.addEventListener('resize', this.setTableHeight)
  }
};
</script>

<style scoped lang="scss">
.el-message-box__content .el-message-box__message,
.el-message-box__content .el-message-box__status {
  display: inline-block;
}
.el-message-box__content .el-message-box__status {
  position: relative;
  top: 10px;
  left: -10px;
}
//::v-deep .el-form .el-col .ell-form-item__label {
//  width: 205px !important;
//}
// .searchbox .el-form .el-col .el-form-item__content {
//::v-deep .el-form .el-col .el-form-item__content {
//  display: inline-block;
//}
//.topBtn {
//  padding: 9px 20px;
//}
</style>
